<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10饼状图</title>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
</head>
<body>
</body>
</html>
<script>
    /*
    * 初始化数据
    * */
    const dataset = [30, 10, 43, 55, 13];
    const width = 500;
    const height = 500;
    /*
    * 创建svg
    * */
    const body = d3.selectAll('body');
    body.append('svg')
        .attr('width', width)
        .attr('height', height)
    const svg = body.select('svg')
    // 定义一个布局
    const pie = d3.pie()
    // 数据转换
    const pieData = pie(dataset);
    const outerRadius = 100; // 外半径
    const innerRadius = 0; //内半径
    const arc = d3.arc()  // 创建一个环生成器.
        .innerRadius(innerRadius) // 设置环的内半径.
        .outerRadius(outerRadius) // 设置环的外半径.
    const arcs =  // 创建每个数据对应的g组
        svg.selectAll('g')
            .data(pieData)
            .enter()
            .append('g')
            .attr('transform', `translate(${width / 2},${height / 2})`)
    const schemeCategory10 = d3.schemeCategory10
    const color = d3.scaleOrdinal(schemeCategory10)
    arcs.append('path')
        .attr('fill', (data, i) => {
            return color(i)
        })
        .attr('d', (d) => {
            console.log(d);
            return arc(d)
        })
    arcs.append('text')
        .attr('transform', d => {
            return `translate(${arc.centroid(d)})`
        })
        .text(d => {
            return d.data
        })
        .attr('text-anchor','middle')

</script>
